import React, { memo, useRef } from "react";
import { MainLoginWrap } from "./style";
import { emailLogin } from "@/services/login";

export default memo(function MainLogin(props) {
  const emailRef = useRef();
  const passwordRef = useRef();

  const btnLoginByMail = (email, password) => {
    emailLogin(email, password).then((res) => {});
  };

  return (
    <MainLoginWrap className="main-login-box">
      <input ref={emailRef} type="text" placeholder="请输入账号" />
      <input ref={passwordRef} type="password" placeholder="请输入密码" />
      <div className="forget-login">
        <input id="checkboxL" type="checkbox" />
        <label className="auto-login" htmlFor="checkboxL">
          自动登录
        </label>
        <a className="forgetPassword">忘记密码?</a>
      </div>
      <button
        onClick={(e) =>
          btnLoginByMail(emailRef.current.value, passwordRef.current.value)
        }
        className="main-login-btn"
      >
        登录
      </button>
      <div className="check-new-loginWay">
        <span onClick={props.otherWay}>其他登录方式</span>
      </div>
    </MainLoginWrap>
  );
});
